<template>
  <!-- 商品列表 -->
  <el-card class="flexDc">
    <!-- 标题 -->
    <template #header>
      <h3 class="fs20">商品列表</h3>
    </template>

    <!-- 内容 -->

    <!-- 2. 表格 -->
    <!-- row：element提供的当前行的数据 -->
    <el-table :data="tableData" style="width: 100%" height="0" stripe>
      <!-- 3. type="expand"：下拉扩展 -->
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品 ID：">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="商品名称：">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="所属分类：">
              <span>{{ props.row.category }}</span>
            </el-form-item>
            <el-form-item label="商品价格：">
              <span>{{ props.row.price }}</span>
            </el-form-item>
            <el-form-item label="商品图片：">
              <!-- 注意：这里服务器返回的imgUrl格式有问题，需要自己拼接一下服务器地址 -->
              <img
                :src="
                  'http://127.0.0.1:5000/upload/imgs/goods_img/' +
                  props.row.imgUrl
                "
                alt="图片加载失败"
              />
            </el-form-item>
            <el-form-item label="创建时间：">
              <!-- 注意：时间格式需要处理 -->
              <span>{{ props.row.ctime | formatTime }}</span>
            </el-form-item>
            <el-form-item label="商品评价：">
              <span>{{ props.row.rating }}</span>
            </el-form-item>
            <el-form-item label="商品销量：">
              <span>{{ props.row.sellCount }}</span>
            </el-form-item>
            <el-form-item label="商品描述：">
              <span>{{ props.row.goodsDesc }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="name" width="300">
      </el-table-column>
      <el-table-column label="所属分类" prop="category" width="260">
      </el-table-column>
      <el-table-column label="商品价格" prop="price" width="180">
      </el-table-column>
      <el-table-column label="商品图片" width="260">
        <template v-slot="{ row }">
          <!-- 注意：这里服务器返回的imgUrl格式有问题，需要自己拼接一下服务器地址 -->
          <img
            :src="'http://127.0.0.1:5000/upload/imgs/goods_img/' + row.imgUrl"
            alt="图片加载失败"
          />
        </template>
      </el-table-column>
      <el-table-column label="商品描述" prop="goodsDesc"> </el-table-column>
      <!-- 4. 操作按钮 -->
      <el-table-column label="操作" width="142" fixed="right">
        <template v-slot="{ row }">
          <el-button type="primary" size="mini" @click="editGoods(row)"
            >编辑</el-button
          >
          <el-button type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 5. 分页 -->
    <el-pagination
      :total="total"
      :current-page="currentPage"
      :page-size="pageSize"
      :page-sizes="[2, 4, 6, 8]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>

    <!-- 6. 添加分类对话框
    :visible.sync="dialogVisible"：对话框显示（true）、隐藏（false）
    center：内容居中 -->
    <el-dialog
      title="编 辑 商 品"
      :visible.sync="dialogVisible"
      width="30%"
      center
    >
      {{ editGoodsForm }}
      <!-- 7. 对话框内容 -->
      <el-form
        :model="editGoodsForm"
        :rules="rules"
        ref="editGoodsForm"
        label-width="100px"
      >
        <el-form-item label="商品价格：">
          <el-input v-model="editGoodsForm.price"></el-input>
        </el-form-item>
        <!--  <el-form-item label="活动名称" prop="cateName">
          <el-input v-model="editGoodsForm.cateName"></el-input>
        </el-form-item>
        <el-form-item label="是否启用" prop="state">
          <el-tooltip
            :content="editGoodsForm.state ? '是' : '否'"
            placement="top"
          >
            <el-switch
              v-model="editGoodsForm.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-tooltip>
        </el-form-item>-->
      </el-form>

      <!-- 8. 对话框按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addGoodsCate('editGoodsForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { goodsList } from '@/api/goods.js' // 请求：获取商品列表
import moment from 'moment' // 日期格式化
import _ from 'lodash' // lodash库

export default {
  data() {
    return {
      /* 表格数据 */
      tableData: [], // 表格数据

      /* 分页数据 */
      total: 0, // 数据总条数
      currentPage: 1, // 默认当前页码
      pageSize: 8, // 默认每页条数

      /* 对话框数据 */
      dialogVisible: false, // 对话框的显示隐藏
      editGoodsForm: {}, // 表单数据
      rules: {
        cateName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ]
      } // 表单验证规则
    }
  },

  created() {
    /* 获取商品列表 */
    this.getGoodsList()
  },

  methods: {
    /* 获取商品列表 */
    async getGoodsList() {
      /* 请求参数说明：
      currentPage：当前页,int
      pageSize：每页条数，int */

      /* 响应参数说明：
      total：数据总条数
      data：当前页码对应的数据数组
      id：数据唯一id
      name：商品名称
      category：商品分类
      price：商品价格
      imgUrl：商品图片地址
      ctime：商品创建时间
      rating：商品评价
      sellCount：商品销量
      goodsDesc：商品描述 */

      // 1. 发起获取商品列表请求
      const { data, total } = await goodsList({
        currentPage: this.currentPage,
        pageSize: this.pageSize
      })

      // 2. 渲染数据
      this.tableData = data
      this.total = total
    },

    /* 表格方法 */
    /* 编辑 */
    editGoods(row) {
      // 1. 显示对话框
      this.dialogVisible = true

      // 2. 复写数据
      /* 注意：复写数据时候需要用lodash库中_.cloneDeep()的方法拷贝一份，不然因为表单双向数据绑定的原因影响data中的数据 */
      this.editGoodsForm = _.cloneDeep(row)

      // // 2.
      // this.editForm.uname = row.account // 账号
      // this.editForm.ugroup = row.userGroup // 用户组

      // // 3. 保存当前row的id
      // this.editId = row.id
    },

    /* 分页方法 */
    /* 当前每页条数改变 */
    handleSizeChange(val) {
      // 1. 改变pageSize的值
      this.pageSize = val

      // 2. 重新获取表格数据
      this.getGoodsList()
    },

    /* 当前页码改变 */
    handleCurrentChange(val) {
      // 1. 改变currentPage的值
      this.currentPage = val

      // 2. 重新获取表格数据
      this.getGoodsList()
    }
  },

  filters: {
    // 1. 格式化时间
    formatTime(_) {
      return moment(_).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style lang="less" scoped>
.el-card {
  height: 99%;

  /deep/.el-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: space-between;
  }

  /* 隐藏滚动条但保留滚动功能（webkit 内核） */
  // /deep/.el-table__body-wrapper::-webkit-scrollbar {
  //   display: none;
  // }

  .demo-table-expand {
    font-size: 0;
  }
  /deep/.demo-table-expand label {
    width: 90px;
    padding-left: 8px;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  img {
    width: 60px;
  }
}
</style>